<template>
  <div class="page-search">
    <hmyForm
      :labelWidth="labelWidth"
      v-bind="pageSearchConfig"
      v-model="formData"
    >
      <template #footer>
        <div>
          <el-button :icon="Refresh" @click="emitReset">重置</el-button>
          <el-button type="primary" :icon="Search" @click="emitSearch"
            >搜索</el-button
          >
        </div>
      </template>
    </hmyForm>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import hmyForm from '@/base-ui/form'
import { Search, Refresh } from '@element-plus/icons-vue'
import useMainStore from '@/stores/main/main'

defineProps({
  pageSearchConfig: {
    type: Object,
    default: () => {}
  }
})

let formData = ref({})
// for (const item of props.pageSearchConfig.formItems) {
//   formData.value[item.fileId] = "";
// }//这里不设置的话将会自动根据填写的被填充

const emit = defineEmits(['reset', 'search'])

const emitReset = () => {
  formData.value = {}
  emit('reset')
}
const emitSearch = () => {
  emit('search', formData.value)
}
// 当是手机尺寸的时候,设置搜索框的label的宽度
const labelWidth = ref()
watch(
  () => useMainStore().layoutConfig.shrink,
  () => {
    if (useMainStore().layoutConfig.shrink) {
      labelWidth.value = '100px'
    } else {
      labelWidth.value = '160px'
    }
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
.page-search {
  border-radius: 10px;
  background: var(--hmy-bg-color-overlay);
  padding: 10px;
}
</style>
